<script setup>
import {ref} from 'vue'
import {ElMessage} from "element-plus";

const activeIndex = ref(null)

const handleClick = (index) => {
  activeIndex.value = index
  //用element提示
  ElMessage({
    message: '欢迎来到TABUS！',
    type: 'success',
    plain: true
  })

}
</script>


<template>
  <div class="welcome-container">
    <div class="content">

      <img src="@/assets/tabus.jpg" style="width: 200px" alt="Logo">
      <h1>欢迎使用TABUS</h1>
      <div class="team-info">
        <p><strong>项目组长：</strong> 黄学（新建文件夹创始人,TABUS赞助商，终结者）</p>
        <div style="display: flex;align-content: center;cursor: pointer">
          <div style="padding: 5px">
            项目成员：
          </div>
          <ul style="display: flex; gap: 10px">
            <li
                v-for="(member, index) in [
      '谢金宏 (反贪督导组-组长，银色杀手，斯沃特、GO学长)',
      '朱凯（AI调教师，飞虎队、GO学长）',
      '韦鑫（小黄人，赛斯、GO学长）',
      '张杰才（stick together team，奥摩、GO学长）'
    ]"
                :key="index"
                :class="{ 'animate-slide': activeIndex === index }"
                @click="handleClick(index)" style="padding: 5px; cursor: pointer;"
            >
              {{ member }}
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
a:hover {

  text-decoration: underline;
}

.welcome-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
  font-family: 'Arial', sans-serif;
}

.content {
  text-align: center;
}

h1 {
  color: #000;
  font-size: 2rem;
  margin-bottom: 20px;
}

.team-info {
  font-size: 1rem;
  color: #000;
}

p, strong, ul, li {
  color: #000;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

ul li {
  padding: 5px;
  border-bottom: 5px;
  background-color: #fff;
}

ul li:active {
  background-color: #f0f0f0;
}

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide {
  animation: slideIn 0.5s ease forwards;
}

</style>
